<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历</title>
</head>
<body>
<input type="button" id="btn" value="遍历列表项">
<ul>
    <li>传智播客</li>
    <li>黑马程序员</li>
    <li>传智专修学院</li>
</ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //方式一：传统方式
    /*
    $("#btn").click(function(){
        let lis = $("li");
        for(let i = 0 ; i < lis.length; i++) {
            alert(i + ":" + lis[i].innerHTML);
        }
    });
    */


    //方式二：对象.each()方法
    /*
    $("#btn").click(function(){
        let lis = $("li");
        lis.each(function(index,ele){
            alert(index + ":" + ele.innerHTML);
        });
    });
    */

    /* $("#btn").click(function(){
         /!*
             参数一: 索引, 从0开始.参数名任意
             参数二: 当前遍历 JS对象
         *!/
         $("li").each(function(index,ele){
             alert(index + ":" + ele.innerHTML);
         });
     });*/

    $("#btn").click(function () {
        $("li").each(function () {
            // this: 表示当前遍历的JS对象
            alert($(this).html());
        });
    });

    //方式三：$.each()方法
    /*
    $("#btn").click(function(){
        let lis = $("li");
        $.each(lis,function(index,ele){
            alert(index + ":" + ele.innerHTML);
        });
    });
    */

    //方式四：for of 语句遍历: 3Xxx版本才有
    /* $("#btn").click(function(){
         let lis = $("li");
         for(ele of lis){
             alert(ele.innerHTML);
         }
     });*/
</script>
</html>